<template>
  <view class="league">
    <!-- 联盟介绍 -->
    <view class="league-intro section">
      <view class="title">联盟介绍:</view>
      <view class="content">
        欢迎参加菌子好球联盟，所有参赛球队会在平台记录大志积分，每个赛季积分最高的球队将会获得大志有球专属奖章，并且全平台展示！
      </view>
    </view>

    <!-- 积分规则 -->
    <view class="score-rules section">
      <view class="title">积分规则:</view>
      <view class="content">
        每个球队初次参加大志联赛都获10分，每个胜场会获得3分，平场会获得1分，负则不获得积分。
      </view>
    </view>

    <!-- 联赛列表 -->
    <view class="league-list section">
      <view class="title">联赛列表</view>
      <view class="league-items">
        <view class="league-item" v-for="(item, index) in leagueList" :key="index">
          <image class="league-image" :src="item.image" mode="aspectFill"/>
          <view class="league-info">
            <view class="league-name">{{ item.name }}</view>
            <view class="league-detail">
              <text>赛制: {{ item.format }}</text>
              <text>地点: {{ item.location }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 球队排行榜 -->
    <view class="team-ranking section">
      <view class="title">球队排行榜</view>
      <view class="ranking-header">
        <text class="team-col">球队</text>
        <text class="record-col">胜/平/负</text>
        <text class="goals-col">进/失</text>
        <text class="points-col">积分</text>
      </view>
      <view class="ranking-list">
        <view class="ranking-item" v-for="(team, index) in rankingList" :key="index">
          <view class="team-col">
            <image class="team-logo" :src="team.logo" mode="aspectFit"/>
            <text class="team-name">{{ team.name }}</text>
          </view>
          <text class="record-col">{{ team.record }}</text>
          <text class="goals-col">{{ team.goals }}</text>
          <text class="points-col">{{ team.points }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      leagueList: [
        {
          image: '/static/league/league1.jpg',
          name: '菌子好球&纵横足球俱乐部',
          format: '6人制',
          location: '五华区纵横足球俱乐部'
        },
        {
          image: '/static/league/league2.jpg',
          name: '菌子好球&首体联盟杯联赛',
          format: '6人制',
          location: '首都机场宿舍区南楼体育场1号场地'
        }
      ],
      rankingList: [
        {
          logo: '/static/team/team1.jpg',
          name: '文体路尧',
          record: '2/0/0',
          goals: '7/3',
          points: '6'
        },
        {
          logo: '/static/team/team2.jpg',
          name: '北京红蓝',
          record: '1/1/0',
          goals: '8/4',
          points: '4'
        },
        {
          logo: '/static/team/team3.jpg',
          name: '新北联队',
          record: '1/1/0',
          goals: '7/2',
          points: '4'
        },
        {
          logo: '/static/team/team4.jpg',
          name: '龙七队',
          record: '1/1/1',
          goals: '8/7',
          points: '4'
        },
        {
          logo: '/static/team/team5.jpg',
          name: '济州食堂',
          record: '1/0/1',
          goals: '5/7',
          points: '3'
        },
        {
          logo: '/static/team/team6.jpg',
          name: '聚顺源代表队',
          record: '1/0/0',
          goals: '4/3',
          points: '3'
        },
        {
          logo: '/static/team/team7.jpg',
          name: '雷冠',
          record: '1/0/1',
          goals: '7/5',
          points: '3'
        },
        {
          logo: '/static/team/team8.jpg',
          name: '重庆AEG前进',
          record: '1/0/1',
          goals: '6/5',
          points: '3'
        },
        {
          logo: '/static/team/team9.jpg',
          name: '童年足迹',
          record: '0/2/1',
          goals: '6/7',
          points: '2'
        },
        {
          logo: '/static/team/team10.jpg',
          name: '聚顺源代表队',
          record: '0/1/1',
          goals: '5/8',
          points: '1'
        },
        {
          logo: '/static/team/team11.jpg',
          name: '明天足球队',
          record: '0/1/0',
          goals: '1/1',
          points: '1'
        },
        {
          logo: '/static/team/team12.jpg',
          name: '麻柳河战舰',
          record: '0/1/1',
          goals: '4/8',
          points: '1'
        },
        {
          logo: '/static/team/team13.jpg',
          name: '丰台镇联队',
          record: '0/0/2',
          goals: '3/11',
          points: '0'
        }
      ]
    }
  }
}
</script>

<style lang="scss" scoped>
// 文本省略混入 - 需要放在最前面定义
@mixin text-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.league {
  min-height: 100vh;
  background-color: #f8f8f8;
  padding: 20rpx;

  .section {
    background: #fff;
    border-radius: 12rpx;
    padding: 30rpx;
    margin-bottom: 20rpx;

    .title {
      font-size: 32rpx;
      font-weight: bold;
      color: #333;
      margin-bottom: 20rpx;
    }

    .content {
      font-size: 28rpx;
      color: #666;
      line-height: 1.6;
    }
  }

  .league-list {
    .league-items {
      .league-item {
        display: flex;
        padding: 20rpx 0;
        border-bottom: 1px solid #eee;

        .league-image {
          width: 160rpx;
          height: 120rpx;
          border-radius: 8rpx;
          margin-right: 20rpx;
        }

        .league-info {
          flex: 1;

          .league-name {
            font-size: 28rpx;
            font-weight: bold;
            margin-bottom: 10rpx;
          }

          .league-detail {
            font-size: 24rpx;
            color: #666;

            text {
              display: block;
              line-height: 1.6;
            }
          }
        }
      }
    }
  }

  .team-ranking {
    .ranking-header {
      display: flex;
      padding: 20rpx 0;
      border-bottom: 1px solid #eee;
      font-size: 28rpx;
      color: #666;

      .team-col {
        flex: 2;
      }
      .record-col {
        flex: 1;
        text-align: center;
      }
      .goals-col {
        flex: 1;
        text-align: center;
      }
      .points-col {
        flex: 0.5;
        text-align: center;
      }
    }

    .ranking-item {
      display: flex;
      align-items: center;
      padding: 20rpx 0;
      border-bottom: 1px solid #eee;
      font-size: 28rpx;

      .team-col {
        flex: 2;
        display: flex;
        align-items: center;

        .team-logo {
          width: 60rpx;
          height: 60rpx;
          border-radius: 30rpx;
          margin-right: 10rpx;
        }

        .team-name {
          flex: 1;
          @include text-ellipsis;
        }
      }

      .record-col {
        flex: 1;
        text-align: center;
      }

      .goals-col {
        flex: 1;
        text-align: center;
      }

      .points-col {
        flex: 0.5;
        text-align: center;
      }
    }
  }
}
</style> 